<template>
	

	<div class="store-reviews-more" v-on:click="give">按钮</div>

	<mt-popup :visible.sync="popupVisible" popup-transition="popup-fade">
		 <div class="card-add-box">
		 	<p class="card-add-title">请填写激活码</p>
		 	<input class="card-add-inp" type="text" placeholder="输入激活码" />
		 	<a class="card-btn" href="">确认</a>
		 	<div class="card-close" v-on:click="close">X</div>
		 </div>
	</mt-popup> 
</template>

<script>
	import Vue from 'vue';

	//弹窗
	import {Popup} from 'mint-ui';
	Vue.component(Popup.name, Popup);

	export default {
			data() {
				return {
					
					//弹出框
					popupVisible: false
				}
			},
			components: {

			},
			methods: {
				

				//弹出框	
				give: function() {
					this.popupVisible = !this.popupVisible;
				},
				close: function() {
					this.popupVisible = !this.popupVisible;
				}
				
			},

		


		
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";

	.card-add-box {
		border-radius: rem(8);
		position: relative;
	}
	.mint-popup {
		width: 90%;
		margin: 0 auto;
	}
	.card-add-box {
		padding: rem(27) rem(15) rem(29) rem(15);
		text-align: center;
	}
	.card-add-title {
		font-size: rem(17);
		margin-bottom: rem(20);
	}
	.card-add-inp {
		width: 100%;
		height: rem(35);
		line-height: rem(35);
		border-radius: rem(4);
		border: 1px solid #ccc;
		margin-bottom: rem(20);
		padding: 0 rem(10);
		color: #333;
	}
	.card-btn {
		display: block;
		background: #67cbf8;
		border-radius: rem(4);
		width: 100%;
		height: rem(40);
		line-height: rem(40);
		font-size: rem(17);
		color: #fff;
	}
      	.card-close {
      		position: absolute;
      		top: rem(15);
      		right: rem(15);
      		font-size: rem(18);
      		color: #999;
      	}
      	input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
		font-weight: 100;
		color:#999;
		font-size:rem(14);
	}
</style>